<template>
  <div class="app-container costDialog">
    <el-dialog
      title="选择设备"
      :visible.sync="dialogTableVisible"
      :close-on-click-modal="false"
      :before-close="close"
      width="900px">
      <el-tabs type="border-card">
        <el-tab-pane label="备件费用">
          <el-form :model="selectForm" ref="queryForm" :inline="true">
            <el-form-item label="备件编号：">
              <el-input size="small" v-model="selectForm.partsCode" placeholder="请输入备件编号" clearable/>
            </el-form-item>
            <el-form-item label="备件名称：">
              <el-input size="small" v-model="selectForm.partsName" placeholder="请输入备件名称" clearable/>
            </el-form-item>
            <el-form-item label="类别：">
              <treeselect class="option" v-model="selectForm.typeId" :options="deptOptions" placeholder="请选择所属部门" />
            </el-form-item>
            <el-form-item label="显示：">
              <el-select size="small" multiple  v-model="selectForm.show" placeholder="请选择" clearable>
                <el-option
                  v-for="item in [{label:'所有备件'},{label:'设备关联备件'},{label:'我持有的备件'}]"
                  :key="item.label"
                  :label="item.label"
                  :value="item.label"
                />
              </el-select>
            </el-form-item>



            <el-form-item>
              <el-button size="mini" type="primary" icon="el-icon-search">搜索</el-button>
            </el-form-item>
          </el-form>
          <el-table v-loading="loading" :data="list" stripe border  @selection-change="handleSelectionChange">
            <el-table-column
              type="selection"
              width="55">
            </el-table-column>
            <el-table-column align="center" type="index" label="序号" width="55"/>
            <el-table-column align="center" label="备件编号" prop="partsCode"/>
            <el-table-column align="center" label="备件名称" prop="partsName"/>
            <el-table-column align="center" label="单价" prop="partsPrice"/>
          </el-table>
          <pagination
            :total="total"
            :page.sync="selectForm.pageNum"
            :limit.sync="selectForm.pageSize"
            @pagination="getList"
            :page-sizes="[5,10,30, 50]"
          />
        </el-tab-pane>
        <el-tab-pane label="其他费用">
          <el-table v-loading="loading" :data="list1" stripe border @selection-change="handleSelectionChange">
            <el-table-column
              type="selection"
              width="55">
            </el-table-column>
            <el-table-column align="center" type="index" label="序号" width="55"/>
            <el-table-column align="center" label="费用名称" prop="dictLabel"/>
            
          </el-table>
        </el-tab-pane>
      </el-tabs>
      
      <span slot="footer" class="dialog-footer">
      <el-button size="mini" @click="sumbit">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import { treeselect } from "@/api/system/dept";
  import Treeselect from "@riophae/vue-treeselect";
  import "@riophae/vue-treeselect/dist/vue-treeselect.css";
  import {feiyong} from '@/api/curing/index'

  export default {
    name: "costDialog.vue",
    components:{Treeselect,},
    data() {
      return {
        dialogTableVisible: true,
        loading: false,//加载
        defaultProps: {
          children: "children",
          label: "label"
        },
        deptOptions:'',

        selectForm: {
          partsName: '',//备件名称
          partsCode: '',//备件编号
          partsPrice:'',//单价
          typeId:undefined,//类别
          show:'',
          pageNum: 1,
          pageSize: 10,
        },//查询条件
        list: [],
        list1:[],
        total: 0,
        selectDate: '',//时间
        selectData:'',
      }
    },
    created() {
      this.getTreeselect()
      this.getList1()
    },
    methods: {
      /** 查询类别下拉树结构 */
      getTreeselect() {
        treeselect().then(response => {
          this.deptOptions = response.data;
        });
      },

      getList() {
        
      },
      getList1() {
        feiyong().then(res => {
          this.list1 = res.data
        });
      },
      close() {
        this.$emit('selectChange')
      },
      sumbit() {
        this.$emit('selectChange', this.selectData)
      },
      handleSelectionChange(val) {
        this.selectData=val;
      },
    }
  }
</script>

<style lang="scss">
  .costDialog{
    .option{
      width: 200px;
      height:32px;
      .vue-treeselect__control{
        line-height: 32px;
        height:32px !important;
      }
    }
  }
</style>

